<script>
import axios from "axios"

export default {
  name: "qingQiu",
  data() {
    return {
      courseList: [],
      boutiqueList:[],
      discountList:[]
    }
  },
  created() {
    axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type', {
      type: 'free',
      pageNum: 1,
      pageSize: 5,
    }, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      }
    }).then(res => {
      console.log(res)
      this.courseList = res.data.rows
    })
    axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type', {
      type: 'boutique',
      pageNum: 1,
      pageSize: 5,
    }, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      }
    }).then(res => {
      console.log(res)
      this.boutiqueList = res.data.rows
    })
    axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type', {
      type: 'discount',
      pageNum: 1,
      pageSize: 5,
    }, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      }
    }).then(res => {
      console.log(res)
      this.discountList = res.data.rows
    })
  }

}


</script>

<template>
  <div>
    <div class="container">
      <div v-for="item in courseList" :key="item.courseId" class="course">
        <img :src="item.coverFileUrl" alt="">
        <div>{{item.courseTitle}}</div>
        <div>学习人数：{{item.learningNum}}</div>
        <div v-if="item.isFree==='1'">免费</div>
        <div v-else-if="item.isDiscount==='1'">
          <del>{{ item.coursePrice }}</del>
          {{ item.discountPrice }}
        </div>
        <div v-else>
          <del>{{ item.coursePrice }}</del>/
        </div>
      </div>
    </div>
    <div class="container">
      <div v-for="item in boutiqueList" :key="item.courseId" class="course">
        <img :src="item.coverFileUrl" alt="">
        <div>{{item.courseTitle}}</div>
        <div>学习人数：{{item.learningNum}}</div>
        <div v-if="item.isFree==='1'">免费</div>
        <div v-else-if="item.isDiscount==='1'">
          <del>{{ item.coursePrice }}</del>
          {{ item.discountPrice }}
        </div>
        <div v-else>
          <del>{{ item.coursePrice }}</del>/
        </div>
      </div>
    </div>
    <div class="container">
      <div v-for="item in discountList" :key="item.courseId" class="course">
        <img :src="item.coverFileUrl" alt="">
        <div>{{item.courseTitle}}</div>
        <div>学习人数：{{item.learningNum}}</div>
        <div v-if="item.isFree==='1'">免费</div>
        <div v-else-if="item.isDiscount==='1'">
          <del>{{ item.coursePrice }}</del>
          {{ item.discountPrice }}
        </div>
        <div v-else>
          <del>{{ item.coursePrice }}</del>/
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.container {
  display: flex;
  justify-content: space-between;

  .course {
    width: 18%;

    img {
      width: 100%;
    }
  }
}
</style>